<template>
  <tr class="text-[15px] xl:text-base">
    <td class="p-[10px_20px] border-b border-solid border-[#141414] w-[80px]">
      {{ year ? year : "—" }} 
    </td>
    <td class="p-[10px_20px] border-b border-solid border-[#141414]">
      <router-link :to="{name:`${media}Detail`, params: { id: credit.id}}">
        <strong>{{ name }}</strong>
        <span v-if="episodes" class="text-[#999]">
          {{ episodes }}
        </span>
        <span v-if="role" class="text-white/80">
          {{ role }}
        </span>
      </router-link>
    </td>
  </tr>
</template>
<script setup>
import { computed } from "vue";
const { year, credit } = defineProps({
  year: {
    type: String,
    required: true,
  },
  credit: {
    type: Object,
    required: true,
  },
});

const media = computed(() => {
  if (credit.media_type) {
    return credit.media_type;
  } else if (credit.name) {
    return "tv";
  } else {
    return "movie";
  }
});

const name = computed(() => {
  return credit.title ?? credit.name;
});

const role = computed(() => {
  const character = credit.character;
  const job = credit.job;

  if (character) {
    return ` as ${character}`;
  } else if (job) {
    return ` as ${job}`;
  } else {
    return false;
  }
});

const episodes = computed(() => {
  const episodes = credit.episode_count;

  if (episodes) {
    if (episodes > 1) {
      return `(${episodes} episodes)`;
    } else {
      return `(${episodes} episode)`;
    }
  } else {
    return false;
  }
});
</script>
